<template>
	<base-image
		v-if="outcome"
		:src="`betting-result/${outcome}.svg`"
		class="w-5 h-[15px] rounded-[2px]"
		:class="bgClass"></base-image>
</template>

<script lang="ts" setup>
import { BaseImage } from '@/components/base'
import { PropType, computed } from 'vue'
import { BettingResult } from '@/enums'

const props = defineProps({
	outcome: {
		type: String as PropType<BettingResult>,
		default: ''
	}
})

const bgClass = computed(() => {
	switch (props.outcome) {
		case BettingResult.win:
		case BettingResult.winHalf:
			return 'bg-success'
		case BettingResult.lose:
		case BettingResult.loseHalf:
			return 'bg-danger'
		case BettingResult.cashout:
			return 'bg-info'
		case BettingResult.refund:
			return 'bg-t-3'
		case BettingResult.default:
			return 'bg-bg-4'
		default:
			return ''
	}
})
</script>
